<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="tabList"
      :pagination="false"
      :scroll="{ x: 1500 }"
    >
      <!-- 运单信息 -->
      <div slot="logisticsInfos" slot-scope="text, record">
        <div
          v-for="item in record.logisticsInfos"
          :key="item.id"
          class="logisticsInfos"
        >
          <span>
            {{ item.logisticsName }}
          </span>

          <span>
            {{ item.waybillNm }}
          </span>
        </div>
      </div>
      <!-- //备注 -->
      <div slot="remark" slot-scope="text, record">
        {{
          record.remark === null || record.remark === ""
            ? "暂无"
            : record.remark
        }}
      </div>
      <!-- 、、创建时间 -->
      <div slot="createTime" slot-scope="text, record">
        {{
          record.createTime === null || record.createTime === ""
            ? "暂无"
            : record.createTime.replace("T", " ").split(".")[0]
        }}
      </div>
      <!-- 状态 -->

      <div slot="retreatState" slot-scope="text, record">
        <span
          :style="
            record.status && record.status.name === '取消入库'
              ? 'color:red;'
              : 'color:#3eae7c;'
          "
        >
          {{ record.status && record.status.name ? record.status.name : "" }}
        </span>
      </div>
      <div slot="action" slot-scope="text, record">
        <!-- 客户编辑、删除 -->
        <div class="btnBox">
          <a v-if="accType == 1 && tableType == 1" @click="click(text, record)"
            >编辑</a
          >
          <a
            v-if="accType == 1 && tableType == 1"
            class="del"
            style="margin-left: 10px"
            @click="click(text, record)"
            >删除</a
          >
          <!-- 客服审核 -->
          <a v-if="accType == 2 && tableType == 1" @click="audit(text, record)"
            >审核</a
          >
        </div>
      </div>
    </a-table>
  </div>
</template>

<script>
export default {
  props: ["tabList", "tableType"],

  data() {
    return {
      accType: sessionStorage.getItem("accType"),
    };
  },
  methods: {
    click(q, o) {
      console.log(o);
    },
    audit(text, record) {
      this.$parent.$parent.showModal(record.code);
    },
  },
  created() {
    console.log(this.tableType);
  },
  computed: {
    columns() {
      if (this.accType == 1) {
        return [
          {
            title: "退件编号",
            width: "12%",
            dataIndex: "code",
            key: "code",
            // scopedSlots: { customRender: "key" },
            align: "center",
          },
          {
            title: "退件标题",
            dataIndex: "title",
            key: "title",
            width: "10%",
            scopedSlots: { customRender: "title" },
            align: "center",
          },

          {
            title: "退至仓库",
            dataIndex: "warehousingName",
            key: "warehousingName",
            width: "8%",
            //  scopedSlots: { customRender: "logisticsInfos" },
            align: "center",
            // ellipsis: true,
          },
          {
            title: "处理方式",
            dataIndex: "processType.name",
            key: "processType.name",
            width: "10%",
            align: "center",
          },
          {
            title: "运单数",
            dataIndex: "waybillQuantity",
            key: "waybillQuantity",
            width: "6%",
            //   width: "12%",
            scopedSlots: { customRender: "waybillNo" },
            align: "center",
          },
          {
            title: "退货物流/运单号",
            dataIndex: " logisticsInfos",
            key: " logisticsInfos",
            width: "15%",
            scopedSlots: { customRender: "logisticsInfos" },
            align: "center",
          },

          {
            title: "创建时间",
            dataIndex: "createTime",
            key: "createTime",
            // width: '6%',
            width: "8%",
            scopedSlots: { customRender: "createTime" },
            align: "center",
          },
          {
            title: "创建人",
            dataIndex: "creatorName",
            key: "creatorName",
            // width: '6%',
            width: "12%",
            scopedSlots: { customRender: "createBy" },
            align: "center",
          },
          {
            title: "备注",
            dataIndex: "remark",
            key: "remark",
            // width: '6%',
            width: "12%",
            scopedSlots: { customRender: "remark" },
            align: "center",
          },
          {
            title: "状态",
            dataIndex: "retreatState",
            key: "retreatState",
            scopedSlots: { customRender: "retreatState" },
            // width: "6%",
            width: "12%",
            align: "center",
          },
          {
            title: "操作",
            key: "operation",
            width: 180,
            // width: '%',
            fixed: "right",
            scopedSlots: { customRender: "action" },
            align: "center",
          },
        ];
      }
      if (this.accType == 2) {
        return [
          {
            title: "客户编号",
            width: "12%",
            dataIndex: "serialNumber",
            key: "serialNumber",
            // scopedSlots: { customRender: "key" },
            align: "center",
          },
          {
            title: "退件编号",
            width: "12%",
            dataIndex: "code",
            key: "code",
            // scopedSlots: { customRender: "key" },
            align: "center",
          },
          {
            title: "退件标题",
            dataIndex: "title",
            key: "title",
            width: "10%",
            scopedSlots: { customRender: "title" },
            align: "center",
          },

          {
            title: "退至仓库",
            dataIndex: "warehousingName",
            key: "warehousingName",
            width: "12%",
            //  scopedSlots: { customRender: "logisticsInfos" },
            align: "center",
            // ellipsis: true,
          },
          {
            title: "处理方式",
            dataIndex: "processType.name",
            key: "processType.name",
            width: "12%",
            align: "center",
          },
          // {
          //   title: "运单数",
          //   dataIndex: "waybillQuantity",
          //   key: "waybillQuantity",
          //   width: "6%",
          //   //   width: "12%",
          //   scopedSlots: { customRender: "waybillNo" },
          //   align: "center",
          // },
          // {
          //   title: "退货物流/运单号",
          //   dataIndex: " logisticsInfos",
          //   key: " logisticsInfos",
          //   width: "15%",
          //   scopedSlots: { customRender: "logisticsInfos" },
          //   align: "center",
          // },

          {
            title: "创建时间",
            dataIndex: "createTime",
            key: "createTime",
            // width: '6%',
            width: "20%",
            scopedSlots: { customRender: "createTime" },
            align: "center",
          },
          // {
          //   title: "创建人",
          //   dataIndex: "creatorName",
          //   key: "creatorName",
          //   // width: '6%',
          //   width: "12%",
          //   scopedSlots: { customRender: "createBy" },
          //   align: "center",
          // },
          {
            title: "备注",
            dataIndex: "remark",
            key: "remark",
            // width: '6%',
            width: "12%",
            scopedSlots: { customRender: "remark" },
            align: "center",
          },
          {
            title: "状态",
            dataIndex: "status.name",
            key: "status.status",
            scopedSlots: { customRender: "retreatState" },
            width: "6%",
            // width: "12%",
            align: "center",
          },
          {
            title: "操作",
            key: "operation",
            width: 180,
            // width: '%',
            fixed: "right",
            scopedSlots: { customRender: "action" },
            align: "center",
          },
        ];
      } else {
        return [
          {
            title: "客户编号",
            width: "12%",
            dataIndex: "serialNumber",
            key: "serialNumber",
            // scopedSlots: { customRender: "key" },
            align: "center",
          },
          {
            title: "退件编号",
            width: "12%",
            dataIndex: "code",
            key: "code",
            // scopedSlots: { customRender: "key" },
            align: "center",
          },
          {
            title: "退件标题",
            dataIndex: "title",
            key: "title",
            width: "10%",
            scopedSlots: { customRender: "title" },
            align: "center",
          },

          {
            title: "退至仓库",
            dataIndex: "warehousingName",
            key: "warehousingName",
            width: "12%",
            //  scopedSlots: { customRender: "logisticsInfos" },
            align: "center",
            // ellipsis: true,
          },
          {
            title: "处理方式",
            dataIndex: "processType.name",
            key: "processType.name",
            width: "12%",
            align: "center",
          },
          {
            title: "退货物流/运单号",
            dataIndex: " logisticsInfos",
            key: " logisticsInfos",
            width: "15%",
            scopedSlots: { customRender: "logisticsInfos" },
            align: "center",
          },
          {
            title: "运单数",
            dataIndex: "waybillQuantity",
            key: "waybillQuantity",
            width: "6%",
            //   width: "12%",
            scopedSlots: { customRender: "waybillNo" },
            align: "center",
          },
          {
            title: "创建时间",
            dataIndex: "createTime",
            key: "createTime",
            // width: '6%',
            width: "20%",
            scopedSlots: { customRender: "createTime" },
            align: "center",
          },
          {
            title: "备注",
            dataIndex: "remark",
            key: "remark",
            // width: '6%',
            width: "12%",
            scopedSlots: { customRender: "remark" },
            align: "center",
          },
          {
            title: "状态",
            dataIndex: "status.name",
            key: "status.status",
            scopedSlots: { customRender: "retreatState" },
            width: "6%",
            // width: "12%",
            align: "center",
          },
          {
            title: "操作",
            key: "operation",
            width: 180,
            // width: '%',
            fixed: "right",
            scopedSlots: { customRender: "action" },
            align: "center",
          },
        ];
      }
    },
  },
};
</script>

<style lang="less" scoped>
.logisticsInfos {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 5px 0;
  span {
    flex: 1;
  }
  span:nth-child(1) {
    border-radius: 5px;
    background: #027db4;
    color: #fff;
    flex: 1;
  }
  span:nth-child(2) {
    color: #027db4;
    text-decoration: underline;
    flex: 1;
  }
}
.btnBox a {
  border-bottom: 1px solid rgb(41, 41, 224);
  color: rgb(41, 41, 224);
}
.btnBox .del {
  border-bottom: 1px solid red;
  color: red;
}
</style>